<!doctype html>
<#import "/spring.ftl" as spring />
<html>
<head>
    <#assign ctx = request.contextPath />
    <title>login</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>

    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/login/login.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/login/background.css">

    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
        }

        .flexBackground {
            position: fixed;
            height: 100%;
            width: 100%;
            background-color: #000;
            top: 0;
            left: 0;

            background: url( ${ctx}/static/login/${bgName}) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            z-index: -1;
        }

        .error {
            font-size: 16px;
            line-height: 25px;
            width: 100%;
            padding: 0 50px;

        }

        .errormsg {
            border: 1px dashed red;
            color: #ff4141;
            font-style: italic;
            background-color: #fde7e7;
            padding: 5px 20px;
        }
    </style>
</head>
<body>

<div class="flexBackground">
    <canvas class="canvasBackground">
    </canvas>
</div>

<div class="container">
    <div class="formBox level-login">
        <div class="box boxShaddow"></div>
        <div class="box loginBox">
            <h2>LOGIN</h2>
        <#if SPRING_SECURITY_LAST_EXCEPTION??>
            <p class="error"><span class="errormsg">${SPRING_SECURITY_LAST_EXCEPTION.message}</span></p>
        </#if>
        ${error!""}
            <form class="form" action="<@spring.url '/login'/>" method="post">
                <div class="f_row">
                    <label>Username</label>
                    <input type="text" class="input-field" id="username" name="username" value="user" required>
                    <u></u>
                </div>
                <div class="f_row last">
                    <label>Password</label>
                    <input type="password" class="input-field" id="password" name="password" value="123" required>
                    <u></u>
                </div>
                <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
                <button class="btn" type="submit" id="btn_login"><span>GO</span><u></u>
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 415.582 415.582" xml:space="preserve">
                                    <path d="M411.47,96.426l-46.319-46.32c-5.482-5.482-14.371-5.482-19.853,0L152.348,243.058l-82.066-82.064
                                          c-5.48-5.482-14.37-5.482-19.851,0l-46.319,46.32c-5.482,5.481-5.482,14.37,0,19.852l138.311,138.31
                                          c2.741,2.742,6.334,4.112,9.926,4.112c3.593,0,7.186-1.37,9.926-4.112L411.47,116.277c2.633-2.632,4.111-6.203,4.111-9.925
                                          C415.582,102.628,414.103,99.059,411.47,96.426z"/>
                                    </svg>
                </button>
                <div class="f_link">
                    <a href="javascript:void(0);" class="resetTag">Forgot your password?</a>
                </div>
            </form>
        </div>

        <div class="box forgetbox">
            <a href="#" class="back icon-back">
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 199.404 199.404" style="enable-background:new 0 0 199.404 199.404;"
         xml:space="preserve">
        <polygon points="199.404,81.529 74.742,81.529 127.987,28.285 99.701,0 0,99.702 99.701,199.404 127.987,171.119 74.742,117.876
            199.404,117.876 "/>
    </svg>
            </a>
            <h2>Reset Password</h2>
            <form class="form">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, </p>
                <div class="f_row last">
                    <label>Email Id</label>
                    <input type="text" class="input-field" required>
                    <u></u>
                </div>
                <button class="btn" id="btn_reset"><span>Reset</span><u></u>
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 415.582 415.582" xml:space="preserve">
                                    <path d="M411.47,96.426l-46.319-46.32c-5.482-5.482-14.371-5.482-19.853,0L152.348,243.058l-82.066-82.064
                                          c-5.48-5.482-14.37-5.482-19.851,0l-46.319,46.32c-5.482,5.481-5.482,14.37,0,19.852l138.311,138.31
                                          c2.741,2.742,6.334,4.112,9.926,4.112c3.593,0,7.186-1.37,9.926-4.112L411.47,116.277c2.633-2.632,4.111-6.203,4.111-9.925
                                          C415.582,102.628,414.103,99.059,411.47,96.426z"/>
                                    </svg>
                </button>
            </form>
        </div>

        <div class="box registerBox">
            <span class="reg_bg"></span>
            <h2>Register</h2>
            <form class="form">
                <div class="f_row">
                    <label>Username</label>
                    <input type="text" class="input-field" id="reg_username" required>
                    <u></u>
                </div>
                <div class="f_row">
                    <label>Password</label>
                    <input type="password" class="input-field" id="reg_password" required>
                    <u></u>
                </div>
                <div class="f_row last">
                    <label>Repeat Password</label>
                    <input type="password" class="input-field" id="reg_repeat_password" required>
                    <u></u>
                </div>
                <button class="btn-large" id="btn_register">NEXT</button>
            </form>
        </div>
        <a href="#" class="regTag icon-add">
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 357 357" style="enable-background:new 0 0 357 357;" xml:space="preserve">
                <path d="M357,204H204v153h-51V204H0v-51h153V0h51v153h153V204z"/>
            </svg>

        </a>
    </div>
</div>
<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/login/login.js"></script>
<script src="${ctx}/static/login/flexBackground${jsNumber}.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        // 如果当前页面是iframe，让iframe的父页面（浏览器）跳转到login页面
        if( window.top != window.self ){
            window.parent.location.assign("${ctx}/");// 跳转到登录页面，让iframe的父页面（浏览器）跳转。
        }

        function login(username,password){
            $("#username").val(username);
            $("#password").val(password);
            $("#btn_login").click();
        }

        var jsNumber = ${jsNumber};

        if (jsNumber == 5) {
            $(".flexBackground").flexBackground({
                numberOfPoints: '400',
                radius: '3',
                interval: '50',
                color: 'rgb(0, 0, 0, .5)' //Only In RGB format. don't use #hex or any other color format
            });
        } else {
            $(".flexBackground").flexBackground({
                numberOfPoints: '400',
                radius: '3',
                interval: '50',
                color: 'rgb(256, 256, 256)' //Only In RGB format. don't use #hex or any other color format
            });
        }

        // 注册
        $("#btn_register").on('click', function (e) {
            e.preventDefault();
            var isOk = true;
            var reg_username = $("#reg_username");
            var reg_password = $("#reg_password");
            var reg_repeat_password = $("#reg_repeat_password");

            if (reg_username.val() == '') {
                reg_username.parent('.f_row').addClass('shake');
                isOk = false;
            }
            if (reg_password.val() == '') {
                reg_password.parent('.f_row').addClass('shake');
                isOk = false;
            }
            if (reg_repeat_password.val() == '') {
                reg_repeat_password.parent('.f_row').addClass('shake');
                isOk = false;
            }
            if (reg_password.val() != reg_repeat_password.val()) {
                reg_repeat_password.parent('.f_row').addClass('shake');
                reg_password.parent('.f_row').addClass('shake');
                isOk = false;
            }
            if (!isOk) {
                return;
            } else {
                var data = {
                    username: reg_username.val(),
                    password: reg_password.val()
                }
                var _csrf_token = $("meta[name='_csrf']").attr("content");
                var _csrf_header_name = $("meta[name='_csrf_header']").attr("content");
                $.ajax({
                    type: "POST",
                    beforeSend: function (request) {
                        request.setRequestHeader(_csrf_header_name, _csrf_token);
                    },
                    url: "${ctx}/register",
                    data: data,
                    dataType: 'JSON',
                    success: function (data, status) {
                        console.log(data);
                        if (data.status == 200) {
                            login(data.data.username,data.data.plaintextPassword);
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('注册失败');
                    }
                });
            }

        });
    })
</script>
</body>
</html>